<template>
  <div class="bg_box">
    <!-- 头部区域 start -->
    <div class="header">MayiGenerator-表单生成器</div>

    <el-button type="primary" @click="onAdd" icon="el-icon-plus"
      >添加字段</el-button
    >
    <!--使用draggable组件-->
    <VueDraggable
      class="body"
      v-model="FormData"
      chosenClass="chosen"
      animation="500"
      @start="onStart"
      @end="onEnd"
    >
      <el-card
        class="box-card"
        v-for="(item, index) in FormData"
        :key="item.model + index"
      >
        <div slot="header" class="clearfix">
          <span>{{ item.model }}</span>

          <i
            style="float: right; padding: 3px 0;font-size: 16px;cursor: pointer;"
            type="text"
            class="el-icon-close"
          ></i>
        </div>
        <div>
          <el-form label-position="right" label-width="80px" :model="item">
            <el-form-item label="字段描述:">
              <el-input v-model="item.label" clearable></el-input>
            </el-form-item>
            <el-form-item label="字段类型:">
              <el-select v-model="item.type" placeholder="请选择字段类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否必填:">
              <el-switch
                v-model="item.rules[0].required"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </VueDraggable>

    <!-- 新增对话框 -->
    <el-dialog title="提示" :visible.sync="addAialogVisible" width="30%">
      <el-form
        label-position="right"
        label-width="80px"
        :model="addForm"
        v-if="addAialogVisible"
      >
        <el-form-item label="字段名:">
          <el-input v-model="addForm.model" clearable></el-input>
        </el-form-item>
        <el-form-item label="字段描述:">
          <el-input v-model="addForm.label" clearable></el-input>
        </el-form-item>
        <el-form-item label="字段类型:">
          <el-select v-model="addForm.type" placeholder="请选择字段类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否必填:">
          <el-switch
            v-model="addForm.rules[0].required"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addAialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCommit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { basicsList } from "./config/formItemsConfig";

//导入draggable组件
import VueDraggable from "vuedraggable";
export default {
  components: { VueDraggable },
  computed: {
    basicsArray() {
      // 计算需要显示的基础字段
      return basicsList.filter(item => this.fields.includes(item.type));
    }
  },
  data() {
    return {
      drag: false,
      //定义要被拖拽对象的数组
      myArray: [
        { people: "cn", id: 10, name: "www.itxst.com" },
        { people: "cn", id: 20, name: "www.baidu.com" },
        { people: "cn", id: 30, name: "www.taobao.com" },
        { people: "us", id: 40, name: "www.yahoo.com" }
      ],
      addForm: {},
      addAialogVisible: false,
      FormData: [],
      options: [
        {
          value: "input",
          label: "文本框"
        },
        {
          value: "textarea",
          label: "文本域"
        },
        {
          value: "number",
          label: "数字输入框"
        },
        {
          value: "select",
          label: "下拉选择器"
        },
        {
          value: "switch",
          label: "switch开关"
        },
        {
          value: "date",
          label: "日期选择器"
        },
        {
          value: "time",
          label: "时间选择器"
        },
        {
          value: "upload",
          label: "上传"
        },
        {
          value: "radio",
          label: "单选框"
        },
        {
          value: "checkbox",
          label: "多选框"
        },
        {
          value: "cascader",
          label: "级联选择器"
        },
        {
          value: "slider",
          label: "滑块"
        },
        {
          value: "rate",
          label: "评分"
        }
      ]
    };
  },
  methods: {
    addCommit() {
      this.FormData.push(this.addForm);
      this.addForm = {};
      this.addAialogVisible = false;
    },
    onAdd() {
      this.addForm = {
        type: "input", // 表单类型
        label: "", // 标题文字
        model: "",
        attributes: {
          type: "text",
          width: "100%", // 宽度
          defaultValue: "", // 默认值
          placeholder: "请输入", // 没有输入时，提示文字
          clearable: false,
          maxLength: null,
          hidden: false, // 是否隐藏，false显示，true隐藏
          disabled: false // 是否禁用，false不禁用，true禁用
        },
        rules: [
          //验证规则
          {
            required: false, // 必须填写
            message: "必填项"
          }
        ]
      };
      this.addAialogVisible = true;
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.bg_box {
  background-color: rgb(255, 255, 255);
  .header {
    width: 100%;
    height: 56px;
    text-align: center;
    background: #13c2c2;
    color: #fff;
    line-height: 56px;
    font-size: 18px;
    font-weight: 700;
  }
  .body {
    margin-top: 6px;
    height: calc(100% - 62px);
    display: flex;
    padding: 25px;
    flex-wrap: wrap;
    .add {
      height: 355px;
      width: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 8px;
      color: #a1a2a5;
      border: 1px solid #ebeef5;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      font-size: 100px;
      cursor: pointer;
    }
    .box-card {
      width: 300px;
      height: 355px;
      margin: 8px;
      cursor: move;
    }
    /*选中样式*/
    .chosen {
      border: solid 1px #3089dc !important;
    }
  }
}
</style>
